<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48' title="门店支付"></u-navbar>
		<view class="shopInfo">
			<image :src="shopInfo.icon" mode=""></image>
			<view class="info">
				<view class="name">
					{{shopInfo.shop_name}}
				</view>
				<view class="rate">
					<u-icon name="star-fill" color="#FE8C16" size="28"></u-icon>
					<text>{{shopInfo.score}}分</text>
				</view>
				<view class="price">
					¥ {{shopInfo.average_cost}}/人
				</view>
				<view class="address">
					<text>{{shopInfo.city+'市'+shopInfo.district+'区'+ shopInfo.address}}</text>
					<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="moneyBox">
			<view class="lable">
				消费总额
			</view>
			<view class="money-input">
				<text>¥</text><input type="text" placeholder="请输入金额" />
			</view>
			<view class="money-tip">
				<image src="../../../../static/imgs/fulijinIcon.png" mode=""></image>
				<text>本次消费可赠送福利金：0.00</text>
			</view>
		</view>
		<view class="tips">
			*买单仅限于到店支付，请确定金额后提交
		</view>
		<view class="submit" @click="showPay=true">
			去支付
		</view>
		<u-popup v-model="showPay" mode="bottom" :closeable='true' border-radius='16'>
			<view class="payPop">
				<view class="title">
					选择支付方式
				</view>
				<view class="pay-ul">
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../../static/imgs/weixinzf.png" mode=""></image>
							<text>微信</text>
						</view>
						<u-checkbox v-model="checked" shape="circle" size="30"></u-checkbox>
					</view>
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../../static/imgs/zhifubaozf.png" mode=""></image>
							<text>支付宝</text>
						</view>
						<u-checkbox v-model="checked" shape="circle" size="30"></u-checkbox>
					</view>
				</view>
				<view class="pay">
					确认支付
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				checked: false,
				showPay: false,
				shopId: '',
				shopInfo: ''
			}
		},
		onLoad(option) {
			this.shopId = option.shopId
			this.getDetail()
		},
		methods: {
			async getDetail() {
				let {
					shopId,
				} = this
				let res = await myRequest.getShopdetail({
					page: '1',
					shop_id: shopId
				})
				if (res.status) {
					this.shopInfo = res.data
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shopInfo {
		width: 710rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto 28rpx;
		display: flex;
		align-items: center;
		padding-left: 28rpx;

		image {
			width: 160rpx;
			height: 160rpx;
		}

		.info {
			margin-left: 20rpx;
			width: 70%;
			.name {
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}

			.rate {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #FE8C16;
			}

			.price {
				margin-top: 8rpx;
				font-size: 26rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #999999;
			}

			.address {
				margin-top: 12rpx;
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #666666;
			}
		}
	}

	.moneyBox {
		width: 694rpx;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 20rpx;

		.lable {
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: bold;
			color: #333333;
		}

		.money-input {
			margin-top: 4rpx;
			width: 100%;
			height: 100rpx;
			border-bottom: 2rpx solid #F2F2F2;
			display: flex;
			align-items: center;

			text {
				font-size: 36rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}

			input {
				text-indent: 20rpx;
			}
		}

		.money-tip {
			margin-top: 26rpx;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FB4F4B;
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 18rpx;
			}
		}
	}

	.tips {
		padding-left: 36rpx;
		margin-top: 22rpx;
		font-size: 28rpx;
		font-family: Segoe UI;
		font-weight: 400;
		color: #333333;
	}

	.submit {
		margin: 140rpx auto 0;
		width: 660rpx;
		height: 100rpx;
		background: linear-gradient(180deg, #218BFF 0%, #3064FC 100%);
		border-radius: 16rpx;
		font-size: 34rpx;
		font-family: Segoe UI;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}

	.payPop {
		padding-bottom: 20rpx;

		.title {
			width: 375px;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.pay-ul {

			.pay-li {
				width: 694rpx;
				height: 100rpx;
				background: #FFFFFF;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pay-li-left {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						font-size: 32rpx;
						font-family: Alibaba Sans;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}

			}
		}

		.pay {
			width: 660rpx;
			height: 100rpx;
			background: linear-gradient(180deg, #218BFF 0%, #3064FC 100%);
			border-radius: 16rpx;
			margin: 0 auto;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin-top: 30rpx;
		}
	}

	/deep/ .u-checkbox__label {
		margin-right: 0rpx !important;
	}
</style>
